<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;padding: 10px;border: solid 20px black;margin: 30px;background: red;overflow: auto;}
    </style>
</head>
<body>
    <h2>这是标题</h2>
    <div class="box">这是文字，这还是文字，哈哈文字，这还是文字，哈哈文字，这还是文字，哈哈文字，这还是文字，哈哈哈文字，这还是文字，哈哈文字，这还是文字，哈哈文字，这还是文字，哈哈哈哈文字，这还是文字，哈哈文字，这还是文字，哈哈文字，这还是文字，哈哈</div>
</body>
<script>

    var box = document.querySelector(".box")

    console.log(box);

    // width + padding
    console.log(box.clientWidth, box.clientHeight);

    // width + padding + border
    console.log(box.offsetWidth, box.offsetHeight);

    // width + padding + 可滚动的尺寸
    console.log(box.scrollWidth, box.scrollHeight);

    // 相对于包含块偏移的距离
    console.log(box.offsetLeft, box.offsetTop);

    // 获取当前元素的包含块
    console.log(box.offsetParent);

    // 包含块：离当前元素最近的一个具有定位属性的父元素


    // 以上属性都只能获取，不能设置
    // =======
    // 以下属性即可获取，也可设置

    // 滚走了的距离
    document.onclick = function(){
        box.scrollTop = 111;
        // console.log(box.scrollLeft, box.scrollTop);
    }
</script>
</html>